import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Button, Input, Modal, Radio, } from 'antd';
import React from 'react';

const FormItem = Form.Item;
const { TextArea } = Input;

const UpdateForm = props => {
  const {updateData, updateModalVisible, form, onCancel, onSubmit: handleUpdate} = props

  console.log(updateData);
  // 保存
  const okHandle = () => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      handleUpdate({...fieldsValue, id: updateData.id});
    });
  };

  const formLayout = {
    labelCol: {
      span: 5,
    },
    wrapperCol: {
      span: 15,
    },
  };
  return (
    <Modal
      centered={true}
      destroyOnClose={true}
      title="编辑短信模板"
      visible={updateModalVisible}
      onOk={okHandle}
      onCancel={() => onCancel()}
    >
      <FormItem key="name" {...formLayout} label="模板名称">
        {form.getFieldDecorator('templateName', {
          rules: [
            {
              required: true,
              message: '请输入模板名称',
            },
          ],
          initialValue: updateData.templateName,
        })(<Input placeholder="请输入模板名称" />)}
      </FormItem>
      <FormItem key="status" {...formLayout} label="模板状态">
        {form.getFieldDecorator('state', {
          rules: [
            {
              required: true,
              message: '请选择模板状态',
            },
          ],
          initialValue: updateData.state,
        })( <Radio.Group>
          <Radio value='0'>启用</Radio>
          <Radio value='1'>停用</Radio>
        </Radio.Group>)}
      </FormItem>
      <FormItem key="code" {...formLayout} label="模板编码">
        {form.getFieldDecorator('templateCode', {
          rules: [
            {
              required: true,
              message: '请输入模板编码',
            },
          ],
          initialValue: updateData.templateCode,
        })(<Input placeholder="请输入模板编码" disabled/>)}
      </FormItem>
      <FormItem key="content" {...formLayout} label="短信内容">
        {form.getFieldDecorator('templateContent', {
          rules: [
            {
              required: true,
              message: '请输入短信内容',
            },
          ],
          initialValue: updateData.templateContent,
        })(<TextArea rows={4} placeholder="请输入短信内容" />)}
      </FormItem>
    </Modal>
  )

}

export default Form.create()(UpdateForm);
